<template>
  <div class="skiing-page">
    <div ref="cloud" class="bg-item cloud-item slide-ani-item"></div>
    <div ref="element" class="bg-item element-item slide-ani-item"></div>
    <c-question :answerId="questionIndex" :isShow="questionShow" @trigger="handleTriggerItem"></c-question>
    <c-animation
      class="ani-item"
      :isAnimation="isPlaying || isNearEnd"
      :class="isSwiperEnd && 'people-swiper-ani'"
    ></c-animation>
    <c-snow></c-snow>

    <c-podium ref="podium" :isEnd="isSwiperEnd" @select="handleSelect"></c-podium>

    <c-success-dialog
      v-show="showSuccess"
      :clickHasMedal="clickHasMedal"
      :clickMedalNum="clickMedalNum"
    ></c-success-dialog>
  </div>
</template>

<script>
import Animation from "./Animation.vue"
import SuccessDialog from "./SuccessDialog"
import Snow from "./Snow.vue"
import Podium from "./Podium.vue"
import question from "./Question.vue"

export default {
  name: "skiing",
  components: {
    "c-animation": Animation,
    "c-success-dialog": SuccessDialog,
    "c-podium": Podium,
    "c-question": question,
    "c-snow": Snow,
  },
  data() {
    return {
      curstep: 0,
      isPlaying: true,
      loopnum: -1,
      eleSpeed: 0.12,
      cloudSpeed: 0.02,
      steps: [8, 18, 28, 38, 48],
      size: 1,
      fps: 0,
      showSuccess: false,
      questionIndex: 0,
      questionShow: false,
      isSwiperEnd: false,
      clickHasMedal: true,
      clickMedalNum: 4,
      isNearEnd: false,
    }
  },
  created() {},
  mounted() {
    const head = document.head || document.getElementsByTagName("head")[0]
    this.size = +(document.documentElement.style.fontSize || getComputedStyle(head).fontSize).match(/[0-9-.]+/i)
    this.startRender()
  },
  methods: {
    render() {
      const _ele = this.$refs.element
      const _cloud = this.$refs.cloud
      if (!this.isPlaying || !_ele) return

      this.fps++
      if (this.fps % 2 === 0) return

      const _elebpx = getComputedStyle(_ele).backgroundPositionX
      const _cloudbpx = getComputedStyle(_cloud).backgroundPositionX
      const _len = this.steps.length
      if (this.curstep >= _len) {
        return
      }
      let _elebpxn = +_elebpx.match(/[0-9-.]+/i) / this.size
      let _cloudbpxn = +_cloudbpx.match(/[0-9-.]+/i) / this.size

      if (Math.abs(_elebpxn) >= this.steps[this.curstep]) {
        this.$nextTick(() => {
          this.stopRender()
        })
        if (this.curstep === 4) {
          this.generatePoster()
        }

        this.$emit("grade", this.curstep)
        this.curstep++
        if (this.questionIndex < 4) {
          this.questionShow = true
          this.questionIndex = this.curstep
        }

        this.isPlaying = false
        return
      }

      _elebpxn -= this.eleSpeed
      _cloudbpxn -= this.cloudSpeed
      _ele.style.backgroundPositionX = `${_elebpxn}rem`
      _cloud.style.backgroundPositionX = `${_cloudbpxn}rem`
    },
    startRender() {
      const _this = this
      ;(function _loop() {
        _this.render()
        _this.loopnum = requestAnimationFrame(() => {
          _loop()
        })
      })()
      this.$emit("next", this.curstep)
    },
    stopRender() {
      cancelAnimationFrame(this.loopnum)
    },

    next() {
      if (this.isPlaying) return
      if (this.curstep > this.steps.length - 1) return
      this.questionShow = false
      setTimeout(() => {
        this.isPlaying = true
        this.startRender()
      }, 300)
    },
    handleTriggerItem(data) {
      this.next()
      const { index, isRight } = data
      const podium = this.$refs.podium

      if (podium) {
        podium.setA(index, isRight)
      }
    },
    // 生成最后一页
    generatePoster() {
      this.isNearEnd = true
      setTimeout(() => {
        this.isNearEnd = false
      }, 3000)
      this.isSwiperEnd = true
      this.showSuccess = true
    },

    // 选择奖牌
    handleSelect(data) {
      this.clickHasMedal = data.isRight
      this.clickMedalNum = data.index
    },
  },
  destroyed() {
    this.stopRender()
  },
}
</script>

<style lang="scss" scoped>
.skiing-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  button {
    position: absolute;
    left: 20px;
    top: 40vh;
    z-index: 200;
  }

  .cloud-item {
    background-image: url("/assets/imgs/cloud.png");
    bottom: 32vh;
    position: absolute;
    background-size: 180vw 60vw;
    width: 100vw;
    height: 60vw;
  }

  .element-item {
    background-image: url("/assets/imgs/element.png");
    bottom: 0;
    background-size: 594vw 100vw;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vw;
  }

  .bg-item {
    position: absolute;
    left: 0;
  }

  .slide-ani-item {
    transition: background-position-x 50ms;
    background-position-x: 0px;
    background-position-y: 0;
    background-repeat: no-repeat;
  }

  .ani-item {
    position: absolute;
    bottom: 5vh;
    left: -15vw;
    width: 80vw;
    transform: translateX(0);
    transition: transform 3s linear;
  }

  .people-swiper-ani {
    transform: translateX(160vw);
  }
}
</style>
